<template>
	<div>
		<el-form :inline="true" :model="tSaleList" class="demo-form-inline">
			<el-form-item label="销售单据">
				<el-input v-model="tSaleList.saleNumber" placeholder="销售单据"></el-input>
			</el-form-item>
			<el-form-item label="客户">
				<el-select v-model="tSaleList.customerId" placeholder="请选择">
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="应付金额">
				<el-input :disabled="true" v-model="tSaleList.amountPayable" placeholder="应付金额"></el-input>
			</el-form-item>
			<el-form-item label="实付金额">
				<el-input :disabled="true" v-model="tSaleList.amountPaid" placeholder="实付金额"></el-input>
			</el-form-item>
			<el-form-item label="销售日期">
				<el-date-picker v-model="tSaleList.saleDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="tSaleList.remarkes" placeholder="备注"></el-input>
			</el-form-item>
			<el-form-item label="是否付款">
				<el-select v-model="tSaleList.state" placeholder="请选择">
					<el-option v-for="item in states" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save()">保存</el-button>
			</el-form-item>
		</el-form>
		<el-form>
			<el-form-item><el-button type="primary" @click="handleSaleListGoods()">新增</el-button>
			</el-form-item>
		</el-form>
		<el-divider></el-divider>

		<el-table :data="DataSaleListGoods" height="500">
			<el-table-column fixed prop="code" label="商品编码" width="170" align="center">
			</el-table-column>
			<el-table-column fixed prop="name" label="商品名称" width="170" align="center">
			</el-table-column>
			<el-table-column prop="model" label="型号" width="170" align="center">
			</el-table-column>
			<el-table-column prop="price" label="售价" width="170" align="center">
			</el-table-column>
			<el-table-column prop="num" label="数量" width="170" align="center">
			</el-table-column>
			<el-table-column prop="unit" label="单位" width="170" align="center">
			</el-table-column>
			<el-table-column prop="total" label="总金额" width="170" align="center">
			</el-table-column>
		</el-table>

		<!-- 新增模态框 -->
		<el-dialog title="商品选择" :visible.sync="dialogFormVisible">
			<el-row>
				<el-col :span="4">
					<div>
						<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all accordion
							@node-click="selGoodsTypeByAdd">
						</el-tree>
					</div>
				</el-col>
				<el-col :span="20">
					<div class="dialog-footer" style="margin-left: 100">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="skip()">确 定</el-button>
					</div>
					<el-table :data="goodsData" height="450" highlight-current-row
						@current-change="handleCurrentChange">
						<el-table-column fixed prop="id" label="商品ID" width="80" align="center">
						</el-table-column>
						<el-table-column fixed prop="code" label="商品编码" width="100" align="center">
						</el-table-column>
						<el-table-column fixed prop="name" label="商品名称" width="120" align="center">
						</el-table-column>
						<el-table-column prop="inventoryQuantity" label="库存数量" width="120" align="center">
						</el-table-column>
						<el-table-column prop="minNum" label="库存下线" width="120" align="center">
						</el-table-column>
						<el-table-column prop="model" label="型号" width="120" align="center">
						</el-table-column>
						<el-table-column prop="producer" label="生产商" width="120" align="center">
						</el-table-column>
						<el-table-column prop="purchasingPrice" label="采购价" width="100" align="center">
						</el-table-column>
						<el-table-column prop="remarks" label="备注" width="120" align="center">
						</el-table-column>
						<el-table-column prop="sellingPrice" label="出库价" width="120" align="center">
						</el-table-column>
						<el-table-column prop="unit" label="商品单位" width="100" align="center">
						</el-table-column>
						<el-table-column prop="typeId" label="商品类型" width="100" align="center">
						</el-table-column>
						<el-table-column prop="maxNum" label="库存最大量" width="100" align="center">
						</el-table-column>
						<el-table-column prop="lastPurchasingPrice" label="上次采购价" width="100" align="center">
						</el-table-column>
					</el-table>

				</el-col>
			</el-row>
		</el-dialog>
		<el-dialog title="新增订单" :visible.sync="dialogFormVisible01">
			<el-form>
				<div>
					<el-form-item label="商品编号">
						<el-input :disabled="true" v-model="TGoodsList.code" placeholder="商品编号"></el-input>
					</el-form-item>
					<el-form-item label="商品名称">
						<el-input :disabled="true" v-model="TGoodsList.name" placeholder="商品名称"></el-input>
					</el-form-item>
					<el-form-item label="库存">
						<el-input :disabled="true" v-model="inventoryQuantityAndNum" placeholder="库存 自动生成"></el-input>
					</el-form-item>
					<el-form-item label="总价">
						<el-input :disabled="true" v-model="tSaleListGoods.total" placeholder="总价"></el-input>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="型号">
						<el-input :disabled="true" v-model="tSaleListGoods.model" placeholder="型号"></el-input>

						<el-form-item label="单位">
							<el-input :disabled="true" v-model="tSaleListGoods.unit" placeholder="单位"></el-input>
						</el-form-item>
					</el-form-item><el-form-item label="售价">
						<el-input v-model="tSaleListGoods.price" placeholder="售价"></el-input>
					</el-form-item>
					<el-form-item label="出库数量">
						<el-input v-model="tSaleListGoods.num" placeholder="出库数量"></el-input>
					</el-form-item>

				</div>
				<el-form-item>
					<div class="dialog-footer" style="margin-left: 100">
						<el-button @click="dialogFormVisible01 = false">取 消</el-button>
						<el-button type="primary" @click="insertTSaleListGoods()">确 定</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>

</template>

<script>
	export default {
		watch: {
			"tSaleListGoods.num": {
				immediate: true,
				handler: function(newValue, oldValue) {
					this.tSaleList.amountPaid = newValue * this.tSaleListGoods.price;
					this.tSaleList.amountPayable = newValue * this.tSaleListGoods.price;
					this.tSaleListGoods.total = newValue * this.tSaleListGoods.price;
					this.inventoryQuantityAndNum = this.TGoodsList.inventoryQuantity * 1 - newValue * 1;
				}
			},
			// "tSaleListGoods.price": {
			// 	immediate: true,
			// 	handler: function(newValue, oldValue) {
			// 		this.tSaleList.amountPaid = newValue * this.tSaleListGoods.num;
			// 		this.tSaleList.amountPayable = newValue * this.tSaleListGoods.num;
			// 		this.tSaleListGoods.total = newValue * this.tSaleListGoods.num;
			// 	}
			// },

		},
		data() {
			return {
				dialogFormVisible: false,
				dialogFormVisible01: false,
				DataSaleListGoods: [],
				tSaleListGoods: {
					id: '',
					code: '',
					name: '',
					model: '',
					num: 0,
					price: 0,
					total: '',
					unit: '',
					saleListId: '',
					typeId: '',
					goodsId: 1,
				},
				goodsType: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},

				options: [],
				states: [{
						id: "1",
						name: "已付"
					},
					{
						id: "0",
						name: "未付"
					}
				],
				formLabelWidth: '120px',
				tSaleList: {
					amountPaid: '',
					amountPayable: '',
					saleNumber: '',
					customerId: '',
					state: '',
					saleDate: '',
					remarks: '',
					userId: 1,
				},
				//新增
				TGoods: [],
				InventoryQuantity: {
					id: '',
					inventoryQuantity: ''
				},
				//旧库存-出库=新库存
				inventoryQuantityAndNum: '',
				TGoodsList: {
					id: '',
					code: '',
					inventoryQuantity: '',
					minNum: '',
					model: '',
					name: '',
					producer: '',
					purchasingPrice: '',
					remarks: '',
					sellingPrice: '',
					unit: '',
					typeId: '',
					maxNum: '',
					lastPurchasingPrice: ''
				},
				formLabelWidth: '120px',
				goodsData: [],
				goodsObj: {
					typeName: '',
					typeId: 0
				},
				data: [],
				id: 1,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
			}
		},
		mounted() {
			this.querySheetAndSupply();

		},
		methods: {
			insertTSaleListGoods() {
				//将对象数据放入数组中  push   取出pop
				this.DataSaleListGoods.push(this.tSaleListGoods);

				this.dialogFormVisible01 = false;
			},
			handleSaleListGoods() {
				this.dialogFormVisible = true;
				this.tSaleListGoods.customerId = this.tSaleList.customerId;
				this.queryAllType();
				this.goodsQuery();
			},
			querySheetAndSupply() {
				this.$postRequest("/tSale/makeSheet").then(res => {
					this.tSaleList.saleNumber = res.data.sheetCode;
					this.options = res.data.customer;
				})
			},
			//新增
			goodsQuery() {
				this.$postRequest("/tGoods/queryTGoodsList/" + this.goodsObj.typeId).then(res => {
					this.goodsData = res.data.goodsList;
				});
			},
			selGoodsTypeByAdd(data) {
				//console.log(data);
				const state = data.state;
				console.log(state + "===========")
				if (state != 0) {
					console.log("===")
				} else {
					this.goodsObj.typeName = data.name;
					this.goodsObj.typeId = data.id;
					this.goodsQuery();
				}
			},
			queryAllType() {
				this.$postRequest("/tGoodsType/tGoodsTypeQuery/" + this.id).then(res => {
					this.data = res.data.goodsTypeList;
				});

			},
			skip() {

				this.tSaleListGoods.code = this.TGoodsList.code;
				this.tSaleListGoods.name = this.TGoodsList.name;
				this.tSaleListGoods.typeId = this.TGoodsList.typeId;
				this.tSaleListGoods.goodsId = this.TGoodsList.id;
				this.tSaleListGoods.price = this.TGoodsList.sellingPrice;
				this.tSaleListGoods.unit = this.TGoodsList.unit;
				this.tSaleListGoods.model = this.TGoodsList.model;
				this.dialogFormVisible = false;
				this.inventoryQuantityAndNum = this.TGoodsList.inventoryQuantity;
				this.dialogFormVisible01 = true;
			},
			handleCurrentChange(val) {
				this.TGoodsList = val;
			},
			save() {
				this.$postRequest("/tSale/insertTSaleList", this.tSaleList).then(res => {
					this.tSaleListGoods.saleListId = res.data.saleListId;
					this.$postRequest("/tSale/insertTSaleListGoods", this.tSaleListGoods).then(res => {});
					//修改库存
					this.InventoryQuantity.id = this.TGoodsList.id;
					this.InventoryQuantity.inventoryQuantity = this.inventoryQuantityAndNum;
					this.$postRequest("/tPurchase/updateTGoodsInventoryQuantity", this.InventoryQuantity).then(
						res => {});
				});

			}
		}
	}
</script>

<style>
</style>